<!-- 报告(委修改托型) -->
<template>
  <div class="dialog-container" id="dialog-container">
    <el-dialog v-dialogDrag title="修改" append-to-body :close-on-click-modal="false" :visible.sync="dialogVisible" @close="$emit('update:show', false)" :before-close="handleClose" :show="show" width="800px">
      <div style="overflow: hidden;">
        <img src="../../../../../assets/images/sagw.png" style="float:left;">
        <h2 style="text-align:center;">理化检测报告</h2>
        <span style="float: right;">报告文件编号：</span>
      </div>
      <el-form :model="form" ref="form" :inline="true" label-width="130px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="零件号：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="热处理炉号：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务类型：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="零件名称：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="批次零件总数量：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委托方：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="零件图号：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材料牌号：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="委托日期：" prop="orderid">
              <el-date-picker v-model="form.orderid" type="date" style="width: 200px;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图纸版本：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="材料炉号：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委托单号：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="需求完成日期：" prop="orderid">
              <el-date-picker v-model="form.orderid" type="date" style="width: 200px"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="样品信息：" prop="orderid">
              <el-radio-group v-model="form.orderid">
                <el-radio label="1">实物
                  <el-input v-model="form.orderid" style="width: 70px;margin: 0 5px;"></el-input>件</el-radio>
                <el-radio label="2">试样
                  <el-input v-model="form.orderid" style="width: 70px;margin: 0 5px;"></el-input>件</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：" prop="orderid">
              <el-input type="textarea" v-model="form.orderid" style="width: 580px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="零件状态：" prop="orderid">
              <el-radio-group v-model="form.orderid">
                <el-radio label="新产品试制">新产品试制</el-radio>
                <el-radio label="常规均匀性实验">常规均匀性实验</el-radio>
                <el-radio label="失效零件分析">失效零件分析</el-radio><br>
                <el-radio label="复检">复检</el-radio>
                <el-radio label="设备新增/大修验收">设备新增/大修验收</el-radio>
                <el-radio label="其他">其他</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-tabs v-model="activeName">
          <el-tab-pane label="样品1" name="first">
            <el-table :data="tableData">
              <el-table-column prop="date" label="编号" align="center" width="60"></el-table-column>
              <el-table-column prop="date" label="检测项目" align="center" width="100"></el-table-column>
              <el-table-column prop="date" label="检测位置" align="center" width="100"></el-table-column>
              <el-table-column prop="date" label="检测要求" align="center" width="150"></el-table-column>
              <el-table-column label="实测数据">
                <el-table-column prop="date" label="1" align="center" width="50"></el-table-column>
                <el-table-column prop="date" label="2" align="center" width="50"></el-table-column>
              </el-table-column>
              <el-table-column prop="date" label="检测设备" align="center" width="150"></el-table-column>
              <el-table-column prop="date" label="备注" align="center" width="72"></el-table-column>
              <el-table-column prop="date" label="查看附件" align="center" width="90"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="样品2" name="second">
            样品2
          </el-tab-pane>
        </el-tabs>
        <el-card shadow="never">
          <el-form-item label="上传附件：">
            <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="verify">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: this.show,
        activeName: 'first',
        form: {
          orderid: ''
        },
        activeName: 'first',
        tableData: [],
        fileList: []
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      }
    },
    watch: {
      show() {
        this.dialogVisible = this.show;
      }
    },
    methods: {
      handleClose() { /* 关闭的时候更新状态值 */
        this.dialogVisible = false;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      // 确定
      verify() {
        this.$alert('操作已成功！', '提示', {
          confirmButtonText: '确定',
          type: 'success'
        });
        this.dialogVisible = false;
      }
    }
  }
</script>
